
<script  lang="ts" setup>
import { ref } from 'vue';

import { useRouter, useRoute } from 'vue-router';
    const router = useRouter();
    const props = defineProps({
      tit: {
        type: String,
        required: true
      }
    });
    const back = () => {
      router.back();
    };
</script>
<template>
    <div class="title-box">
      <van-icon name="arrow-left" class="back" @click="back" />
      <div class="tit">{{tit}}</div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
</template>
<style lang="less" scoped>
.title-box{
    height: 124px;
    background: #0462eb;
    text-align: center;
    line-height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .back{
      font-size: 60px;
      color: #fff;
      position: absolute;
      top: 50%;
      left:34px;
      transform: translateY(-50%);
    }
    .tit{
      font-size: 52px;
      color: #fff;
      font-weight: bold;
    }
    .right{
      position: absolute;
      right:58px;
      display: flex;
      align-items: center;

    }
}
</style>
